<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="msg">asd</p>
<input type="text" name="message" id="message">
<script src="/jquery-3.6.js"></script>
<script th:src="@{/layui-v2.6.8/layui/layui.js}"></script>

<script>




    var websocket;


    $(function (){
        $("#message").click(function (){
            let msg=$("#message").val();
            layer.msg(msg);
            $.ajax({
                dataType:"json",
                type:"get",
                url:"http://localhost:8080/TestWebSocket",
                data:{"message":msg},
                success:function (data){
                    alert(data)
                },
                error:function (e){
                }
            })
        })
    })


    websocket = new WebSocket('ws://localhost:8080/websocket');

    websocket.onopen=function (event) {
        console.log("连接");
    }
    websocket.onclose=function (event){
        console.log("关闭")
    }
    websocket.onmessage=function (event){
        var msg=document.getElementById('msg');
        msg.innerHTML=event.data;
        console.log("收到消息："+event.data)
    }
    window.onbeforeunload=function (event){
        websocket.close();
    }
</script>
</body>
</html>
